<template>
  <div id="app">
    <div class="top-setting">
      <a-button class="icon-op" shape="circle" @click="editItem({index: active[0], content: records[active[0]].content})" icon="form" />
      <a-button class="icon-op" shape="circle" @click="copy(records[active[0]].content)" icon="copy" />
      <a-button class="icon-op" shape="circle" @click="deleteItem(active[0])" icon="delete" />
      <a-button class="icon-op" shape="circle" @click="addItem()" icon="plus" />

      启动自动粘贴
      <a-switch @change="changeStatus" checked-children="开" un-checked-children="关" :checked="status" />
      <a-alert type="warning" style="margin-left: 20px;" message="该插件为系统插件，安装完成后，需要重启才能使用自动粘贴功能" />
    </div>
    <div class="content">
      <a-menu @click="active = [0]" style="width: 200px; background: #F4F4F4;" v-model="currentTag">
        <a-menu-item key="total"><a-icon type="appstore" />全部 </a-menu-item>
        <a-menu-item key="none"><a-icon type="flag" />无标签 </a-menu-item>
        <a-menu-item :key="tag" v-for="tag in tags">{{ tag }}</a-menu-item>
      </a-menu>
      <draggable class="list" v-model="records" group="people" @end="endDrag">
        <div
          @click="active = [index]"
          :class="active.indexOf(index) >= 0 ? 'item active' : 'item'"
          v-for="(element, index) in records"
          v-show="showRecord(element)"
          :key="index"
        >
          <pre @click="copy(element.content)" class="ellipse" v-if="element.type === 'text'" v-text="element.content"></pre>
          <img v-else :src="element.content" />
        </div>
      </draggable>
    </div>

    <a-modal
      v-model="showEdit"
      @ok="handleSave"
      okText="保存"
      :closable="false"
      cancelText="关闭"
    >
      <a-select
        v-model="tag"
        mode="tags"
        style="width: 100%; margin-bottom: 20px"
        placeholder="打个标签，快速检索"
      ></a-select>
      <a-textarea
        v-model="editContent"
        :auto-size="{ minRows: 3, maxRows: 10 }"
      />
    </a-modal>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  name: 'App',
  data() {
    return {
      records: [
        {
          content: "初次安装请重启 rubick",
          type: "text",
        }
      ],
      active: [0],
      showEdit: false,
      editContent: "",
      editIndex: 0,
      status: false,
      query: "",
      tag: [],
      currentTag: ["total"],
      tags: [],
    }
  },
  created() {
    const {status, records} = window.getData()
    this.records = records;
    this.status = status;
    //
    window.updateRender = () => {
      const {records} = window.getData();
      this.records = records
    }
    this.getTagList();
    window.addEventListener("keydown", this.onKeydownAction);

    // 搜索
    window.rubick.setSubInput(({text}) => {
      this.query = text;
      this.active = [0];
    }, "输入搜索内容，按回车进行检索");
  },
  beforeUnmount() {
    window.removeEventListener("keydown", this.onKeydownAction);
  },
  methods: {
    transChar(val, patten, replaceChar) {
      if (!val) {
        return ''
      }
      let reg = new RegExp(patten, 'g')
      return val.replace(reg, replaceChar)
    },
    onKeydownAction (e) {
      let index = 0;
      if (e.code === "ArrowDown") {
        index = 1;
      }
      if (e.code === "ArrowUp") {
        index = -1;
      }
      if (!this.records.length) return;
      if (
        this.active[0] + index > this.records.length - 1 ||
        this.active[0] + index < 0
      )
        return;
      this.active = [this.active[0] + index];
    },
    endDrag() {
      window.changeRecords(JSON.parse(JSON.stringify(this.records)));
    },
    editItem({content, index}) {
      this.editIndex = index;
      this.showEdit = true;
      this.editContent = content;
    },
    addItem() {
      this.records.unshift({
        type: "text",
        content: "",
      });
      this.editIndex = 0;
      this.showEdit = true;
    },
    deleteItem(index) {
      this.records.splice(index, 1);
      window.changeRecords(JSON.parse(JSON.stringify(this.records)));
    },
    copy(content) {
      window.rubick.copyText(content);
      window.rubick.showNotification("已复制到剪切板！");
    },
    handleSave() {
      this.showEdit = false;
      this.records[this.editIndex].content = this.editContent;
      this.$set(this.records[this.editIndex], "tag", this.tag);
      this.getTagList();
      window.changeRecords(JSON.parse(JSON.stringify(this.records)));
    },
    changeStatus(checked) {
      this.status = checked;
      window.changeStatus(checked);
    },
    getTagList() {
      this.tags = [];
      this.records.forEach(record => {
        this.tags = this.tags.concat(record.tag);
      });
      this.tags = this.tags.filter((tag, i) => (this.tags.indexOf(tag) === i && tag));
    }
  },
  computed: {
    showRecord() {
      return function (item) {
        const tag = this.currentTag[0];
        if (tag === "total") {
          return item.content.indexOf(this.query) >= 0;
        }
        if (tag === "none") {
          return item.content.indexOf(this.query) >= 0 && !item.tag;
        }
        return item.content.indexOf(this.query) >= 0 && item.tag && item.tag.indexOf(tag) >= 0;
      }
    }
  },
  components: {
    draggable,
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.content {
  display: flex;
  width: 100%;
  padding-top: 60px;
  box-sizing: border-box;
  height: calc(100vh - 60px);
}
.content .list {
  flex: 1;
  margin-left: 10px;
  overflow: auto;
}
#app {
  padding: 0 10px;
  background: #F4F4F4;
  height: 100vh;
  box-sizing: border-box;
}
.top-setting {
  text-align: left;
  height: 60px;
  position: fixed;
  width: 100%;
  background: #F4F4F4;
  display: flex;
  align-items: center;
}
.icon-op {
  margin-right: 10px;
}
.item {
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000;
  padding: 20px;
  border-radius: 6px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
}

.item.active {
  border: 1px solid #1890ff;
}
.action {
  font-size: 18px;
  color: #000;
}

.icon {
  margin-left: 20px;
}

.ellipse {
  overflow: auto;
  white-space: pre;
  max-width: 500px;
  max-height: 300px;
  display: inline-block;
}
.ellipse:hover {
  background: #ddd;
}
</style>
